<!--  -->
<template>
  <div class="form">
    <el-form
      :model="data"
      :rules="rules"
      ref="form"
      :label-width="labelWidth"
      class="demo-ruleForm"
      v-bind="{...formConfig}"
    >
      <el-form-item :label="val.label" prop="name" v-for="(val, key) in formData" :key="key">
        <el-col :span="val.span ? val.span:24">
          <!-- 输入框 -->
          <el-input v-if="val.type === 'input'" v-model="data[val.name]"></el-input>
          <!-- 选择框 -->
          <el-select v-if="val.type === 'select'" v-model="data[val.name]" placeholder="请选择活动区域">
            <el-option v-for="(item, key) in val.selectVal" :key="key" v-bind="{...item}"></el-option>
          </el-select>
          <!-- 日期选择器 -->
          <el-date-picker
            v-if="val.type === 'date_picker'"
            type="date"
            placeholder="选择日期"
            v-model="data[val.name]"
            style="width: 100%;"
          ></el-date-picker>
          <!-- 时间选择器 -->
          <el-time-picker
            v-if="val.type === 'time_picker'"
            placeholder="选择时间"
            v-model="data[val.name]"
            style="width: 100%;"
          ></el-time-picker>
          <!-- 切换按钮 -->
          <el-switch v-if="val.type === 'switch'" v-model="data[val.name]"></el-switch>
          <!-- 多选框 -->
          <el-checkbox-group v-if="val.type === 'checkbox'" v-model="data[val.name]">
            <el-checkbox v-for="(item, key) in val.groups" :key="key" v-bind="{...item}"></el-checkbox>
          </el-checkbox-group>
          <!-- 单选框 -->
          <el-radio-group v-if="val.type === 'radio'" v-model="data[val.name]">
            <el-radio v-for="(item, key) in val.groups" :key="key" v-bind="{...item}"></el-radio>
          </el-radio-group>
          <!-- 文本域 -->
          <el-input v-if="val.type === 'textarea'" type="textarea" v-model="data[val.name]"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
      rules: {}
    };
  },
  created() {
    console.log(this.formConfig);
    
    let data = {},
      rules = {};
    for (var idx in this.formData) {
      data[this.formData[idx].name] = this.formData[idx].value;
      if ("rules" in this.formData[idx]) {
        rules[this.formData[idx].name] = this.formData[idx].rules;
      }
    }
    this.data = this.$utils.deepClone(data);
    this.rules = this.$utils.deepClone(rules);
  },
  props: {
    // 表单配置
    formConfig: {
      type: Object
    },
    // 表单数据
    /**
     * 数据格式(以文本框为例)
     * {
          name: "name",//表单元素名称
          label: "姓名",//标题
          value: "",//默认值
          type: "input",//表单类型
          span:"12",//表单长度，详情参考element的栅格布局
          // 可根据需要添加属性
          rules: [
            // 表单规则，详情参考element组件文档
            { required: true, message: "请输入活动名称", trigger: "blur" },
            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
          ]
        }
     */
    formData: {
      type: Array,
      required: true
    },
    // 标题宽度
    labelWidth: {
      type: String,
      default: () => {
        return "100px";
      }
    }
  },
  components: {},
  methods: {
    // 处理表单元素
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let formData = {
            valid,
            data:this.data
          }
          this.$emit('submit',formData);
        } else {
          throw("error submit!!");
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit('reset',true)
    }
  }
};
</script>
<style lang='scss' scoped>
</style>